<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <link rel="stylesheet" href="../../css/pay.css">
        <link rel="stylesheet" href="../../css/bootstrap.css">
        <script type="text/javascript" src="../../js/jquery-1.12.4.js"></script>
        <script type="text/javascript" src="../../js/bootstrap.js"></script>
        <script type="text/javascript" src="../../js/vue-2.6.12.js"></script>
        <script type="text/javascript" src="../../js/axios-0.21.0.js"></script>
</head>

<body class="body">
    <div id="alipay" class="container">
        <div class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a href="http://www.baizhiedu.com" class="navbar-brand">珠宝网</a>
        
                </div>
                <span class="navbar-text">欢迎您：<a href="" >xxx</a></span>
                <ul class="nav navbar-nav">
                    <li><a href="" class="navbar-link"><span class="text-primary">登录</span></a></li>
                    <li class="divider"></li>
                    <li><a href="" class="navbar-link"><span class="text-primary">注册</span></a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li >
                        <a href="cart/cart.html">
                            <svg height="15"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                 viewBox="0 0 489 489" style="enable-background:new 0 0 489 489;" xml:space="preserve">
                                                    <g>
                                                        <path d="M440.1,422.7l-28-315.3c-0.6-7-6.5-12.3-13.4-12.3h-57.6C340.3,42.5,297.3,0,244.5,0s-95.8,42.5-96.6,95.1H90.3
                                                            c-7,0-12.8,5.3-13.4,12.3l-28,315.3c0,0.4-0.1,0.8-0.1,1.2c0,35.9,32.9,65.1,73.4,65.1h244.6c40.5,0,73.4-29.2,73.4-65.1
                                                            C440.2,423.5,440.2,423.1,440.1,422.7z M244.5,27c37.9,0,68.8,30.4,69.6,68.1H174.9C175.7,57.4,206.6,27,244.5,27z M366.8,462
                                                            H122.2c-25.4,0-46-16.8-46.4-37.5l26.8-302.3h45.2v41c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h139.3v41
                                                            c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h45.2l26.9,302.3C412.8,445.2,392.1,462,366.8,462z"/>
                                                    </g>
                                                </svg>
                            <span class="text-muted">购物车</span>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="">我的珠宝</a></li>
                    <li class="divider"></li>
                    <li><a href="">帮助</a></li>
                </ul>
            </div>
        </div>

        <div class="bd">
            <div class="row">
                <div class="col-md-5">
                    <img src="../images/cart/dd_logo.jpg" alt="" class="pull-right">
                </div>
                <div class="col-md-7">
        
                    <ul class="nav nav-pills " style="padding-top:10px">
                        <li  style="margin: 10px;background:rgb(246,246,246)"><h4 style="margin:15px;">1.购物车</h4></li>
                        <li  style="margin: 10px;background:rgb(246,246,246)"><h4 style="margin:15px">2.填写订单</h4></li>
                        <li  style="margin:10px;background:rgb(255,102,102)"><h4 style="margin:15px;color:rgb(255,231,250)" class="text-muted">3.支付订单</h4></li>
                    </ul>
                </div>
            </div>
            <hr style="border:solid 2px red;">

            <div class="bd-main">
                <div class="ep-wrapper">
                    <div class="ep-pay-step ep-step-channel bd-main-container" style="padding: 30px 270px 30px 250px;display: block;">
                        <div class="ep-order-detail">
                            <!-- <div>
                                <div class="ep-order-tit">
                                    <dl>
                                        <dt>商品订单：</dt>
                                        <dd>{{orderId}}</dd>
                                    </dl>
                                </div>
                                <div class="ep-order-tit">
                                    <span>支付金额：<em class="rmb"><i>¥</i>{{paymentInfo.amount / 100}}</em></span>
                                </div>
                            </div> -->
                            <div>
                                <img src="../images/pay/loading.gif" style="height:90px;"/>
                                <span class="hit-words">订单[<em style="color: #0ac265">{{orderId}}</em>]正在支付中，请耐心等待...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var index = new Vue({
            el: "#alipay",
            data: {

                orderId: null,
                paymentInfo: [],

                alipayForm: "",
            },
            created() {

                // 获得订单号
                // 获得订单号
                let ss = location.href.split("?");
                if(ss.length != 2){
                    alert("orderId不能为空")
                    return;
                }
                let orderId = ss[1].split("=")[1];
                // 如果orderId为空，跳转到错误页面
                if (orderId == null || orderId == undefined || orderId == '') {
                    alert("orderId不能为空")
                    return;
                }

                this.orderId = orderId;
                this.getAliPayForm(orderId);
            },
            methods: {
                // 获得支付宝构建的支付提交form 
                getAliPayForm(orderId) {
                    // window.document.write("&lt;script type='text/javascript'&gt;alert('hello');&lt;/script&gt;");
					axios.get('/dangdang/trade/pay.do?orderId=' + orderId)
							.then(res => {
								if (res.status == 200) {
                                    var alipayForm = res.data;
                                    console.log(alipayForm);

                                    document.write(alipayForm);
								} else {
									alert(res.data.msg);
								}
							});
                }
            }
        });
    </script>
</body>

</html>